<template>
    <view class="wallet">

        <!-- Header -->
        <view class="header white flex row-between">
            <view class="white">
                <view class="header-label xs">可提现金额</view>
                <view class="header-price m-t-20">¥{{withdrawInfo.wallet||0}}</view>
            </view>
            
            <router-link to="/bundle/pages/user_withdraw/user_withdraw">
                <view class="header-btn br60 flex bg-white row-center md">
                    <text class="iconfont icon-wallet m-r-10"></text>去提现
                </view>
            </router-link>
        </view>

        <!-- 账户数据卡片 -->
        <view class="data-cards flex row-between">
            <view class="data-card flex column-center">
                <text class="data-value">{{withdrawInfo.total || 0}}</text>
                <text class="data-label">总收入</text>
            </view>
            <view class="data-card flex column-center">
                <text class="data-value">{{withdrawInfo.withdraw || 0}}</text>
                <text class="data-label">已提现</text>
            </view>
        </view>
        
        <!-- Section -->
        <view class="section m-t-40">
            <view class="tab-header flex">
                <view class="tab-item" :class="{'active': activeTab === 'income'}" @click="switchTab('income')">
                    账户记录
                </view>
                <view class="tab-item" :class="{'active': activeTab === 'withdraw'}" @click="switchTab('withdraw')">
                    提现记录
                </view>
            </view>
            
            <!-- 账户记录顶部筛选按钮 -->
            <view v-if="activeTab === 'income'" class="filter-button-bar flex row-between">
                <view class="filter-hint">{{filterHintText}}</view>
                <view class="filter-button" @click="showFilterPopup">
                    <text class="filter-button-text">筛选</text>
                    <text class="iconfont icon-filter"></text>
                </view>
            </view>
            
            <view class="content">
                <!-- 账户记录列表 -->
                <view v-if="activeTab === 'income'" class="income-list" ref="incomeListRef" style="height: 100%; overflow-y: auto;" @scroll="handleIncomeScroll">
                    <view v-if="incomeLoading" class="loading-box flex row-center">
                        <view class="loading"></view>
                        <text class="loading-text">加载中...</text>
                    </view>
                    
                    <block v-for="(item, index) in incomeLists" :key="index">
                        <view class="wallet-cell flex row-between">
                            <!-- Left -->
                            <view>
                                <view class="remark md">
                                    <!-- 根据来源类型显示不同文本 -->
                                    <template v-if="item.source_type === 'offline_payment'">
                                        线下收款
                                    </template>
                                    <template v-else-if="item.source_type === 'verification_income'">
                                        核销收入
                                    </template>
                                    <template v-else-if="item.source_type === 'wine_coupon_verification'">
                                        酒券核销收入
                                    </template>
                                    <template v-else>
                                        {{item.source_type || '收入'}}
                                    </template>
                                </view>
                                <view class="time m-t-10 muted sm">{{item.create_time}}</view>
                            </view>
                            
                            <!-- Right -->
                            <view class="black">
                                <view class="money lg text-right" :class="item.change_type == 1 ? 'income-color' : ''">
                                    {{item.change_amount_format}}
                                </view>
                                <view class="lighter sm">{{item.remark || '交易详情'}}</view>
                            </view>
                        </view>
                    </block>
                    
                    <view v-if="incomeLists.length === 0 && !incomeLoading" class="empty-box flex column-center">
                        <image src="/static/images/empty/money.png" mode="aspectFit" class="empty-icon"></image>
                        <text class="empty-text">暂无账户记录！</text>
                    </view>
                    
                    <view v-if="incomeLists.length > 0 && !incomeMore && !incomeLoading" class="no-more flex row-center">
                        <text>— 没有更多数据了 —</text>
                    </view>
                    
                    <view v-if="incomeLists.length > 0 && incomeMore && incomeLoading" class="loading-more flex row-center">
                        <view class="loading"></view>
                        <text class="loading-text">加载更多...</text>
                    </view>
                </view>
                
                <!-- 提现记录列表 -->
                <mescroll-uni v-if="activeTab === 'withdraw'" ref="mescrollRefWithdraw" top="0rpx" :height="height+'px'" @init="mescrollInit"
                    @up="upCallbackWithdraw" :up="upOption" @down="downCallback" style="height: 100%;">
                
                    <block v-for="(item, index) in withdrawLists" :key="index">
                        <view class="wallet-cell flex row-between">
                            <!-- Left -->
                            <view>
                                <view class="remark md">余额提现</view>
                                <view class="time m-t-10 muted sm">{{item.create_time}}</view>
                            </view>
                            
                            <!-- Right -->
                            <view class="black">
                                <view class="money lg text-right">{{item.change_amount}}</view>
                                <template v-if="item.status == 0">
                                    <view style="color: #01D739;" class="sm">申请中</view>
                                </template>
                                <template v-if="item.status == 1">
                                    <view style="color: #01D739;" class="sm">处理中</view>
                                </template>
                                <template v-if="item.status == 2">
                                    <view class="lighter sm">转账成功</view>
                                </template>
                                <template v-if="item.status == 3">
                                    <view style="color: #FF4141;" class="sm">转账失败</view>
                                </template>
                            </view>
                        </view>
                    </block>
                
                </mescroll-uni>
            </view>
        </view>
        
        <!-- 自定义筛选弹出层 -->
        <view v-if="isFilterVisible" class="custom-popup-mask" @click="closeFilterPopup">
            <view class="custom-popup" @click.stop>
                <view class="filter-popup-header">
                    <text class="filter-popup-title">筛选条件</text>
                    <text class="filter-popup-close" @click="closeFilterPopup">×</text>
                </view>
                
                <view class="filter-popup-content">
                    <view class="filter-section">
                        <view class="filter-section-title">交易类型</view>
                        <view class="filter-options">
                            <view class="filter-option" :class="{'active': tempTypeFilter === ''}" @click="tempTypeFilter = ''">
                                全部
                            </view>
                            <view 
                                v-for="(name, type) in transactionTypes" 
                                :key="type"
                                class="filter-option" 
                                :class="{'active': tempTypeFilter === Number(type)}" 
                                @click="tempTypeFilter = Number(type)"
                            >
                                {{name}}
                            </view>
                        </view>
                    </view>
                    
                    <view class="filter-section">
                        <view class="filter-section-title">时间范围</view>
                        <view class="filter-options">
                            <view class="filter-option" :class="{'active': tempDateFilter === ''}" @click="tempDateFilter = ''">
                                全部时间
                            </view>
                            <view class="filter-option" :class="{'active': tempDateFilter === 'today'}" @click="tempDateFilter = 'today'">
                                今天
                            </view>
                            <view class="filter-option" :class="{'active': tempDateFilter === 'week'}" @click="tempDateFilter = 'week'">
                                本周
                            </view>
                            <view class="filter-option" :class="{'active': tempDateFilter === 'month'}" @click="tempDateFilter = 'month'">
                                本月
                            </view>
                        </view>
                    </view>
                </view>
                
                <view class="filter-popup-footer">
                    <view class="filter-popup-btn filter-popup-reset" @click="resetFilter">重置</view>
                    <view class="filter-popup-btn filter-popup-apply" @click="applyFilter">确定</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		getRect
	} from '@/utils/tools'
    import {
        apiWithdrawLog,
        apiGetWithdrawInfo,
        getAccountLog,
        getTransactionTypes
    } from "@/api/user.js"
    export default {
        mixins: [MescrollMixin],
        components: {
            // 不再引用uni-popup组件
        },
        data() {
            return {
                height: 414,
                withdrawInfo: {},
                withdrawLists: [],
                incomeLists: [],
                activeTab: 'income',
                mescroll: null,
                incomeLoading: false,
                incomePage: 1,
                incomeMore: true,
                isScrollToBottom: false,
                
                upOption: {
                    auto: true,
                    page: {
                        num: 0,
                        size: 10
                    },
                    noMoreSize: 5,
                    textLoading: '努力加载中...',
                    textNoMore: '-- 已经到底啦 --',
                    empty: {
                        icon: '/static/images/empty/money.png',
                        tip: '暂无提现记录！', // 提示
                        fixed: true,
                        top: "200rpx",
                    },
                    onScroll: true,
                    isBounce: false,
                    offset: 80,
                    toTop: {
                        src: '/static/images/back-top.png',
                        offset: 1000,
                        duration: 300
                    },
                    bgColor: '#f5f7fa'
                },
                
                incomeUpOption: {
                    empty: {
                        icon: '/static/images/empty/money.png',
                        tip: '暂无账户记录！', // 提示
                        fixed: true,
                        top: "200rpx",
                    }
                },
                
                // 筛选相关
                isFilterVisible: false,
                transactionTypes: {},
                typeFilter: '',
                tempTypeFilter: '',
                dateFilter: '',
                tempDateFilter: '',
                typeFilterText: '全部类型',
                dateFilterText: '全部时间',
            }
        },
        
        computed: {
            // 筛选提示文本
            filterHintText() {
                let hint = '';
                if (this.typeFilter || this.dateFilter) {
                    if (this.typeFilter) {
                        hint += this.typeFilterText;
                    }
                    if (this.dateFilter) {
                        if (hint) hint += ' / ';
                        hint += this.dateFilterText;
                    }
                } else {
                    hint = '全部记录';
                }
                return hint;
            }
        },
        
        onLoad() {
            this.getWithdrawInfoFunc();
            this.getTransactionTypesFunc();
            this.$nextTick(() => {
                this.loadIncomeData(true);
            });
        },
        
        onReady() {
            this.getHeight();
        },
        
        onShow() {
            this.getWithdrawInfoFunc();
            
            if (this.activeTab === 'income' && this.incomeLists.length === 0) {
                this.loadIncomeData(true);
            }
        },
        methods: {
            switchTab(tab) {
                console.log('切换到标签:', tab);
                this.activeTab = tab;
                
                this.$nextTick(() => {
                    this.getHeight();
                    
                    if (tab === 'withdraw' && this.withdrawLists.length === 0) {
                        this.mescroll && this.mescroll.resetUpScroll();
                    } else if (tab === 'income') {
                        this.loadIncomeData(true);
                    }
                });
            },
            
            async getHeight() {
                try {
                    const sys = uni.getSystemInfoSync();
                    // 计算可用高度：屏幕高度 - 状态栏高度 - 导航栏高度 - 内容区域padding
                    this.height = sys.windowHeight - sys.statusBarHeight - 44 - 40;
                    console.log('计算的高度:', this.height);
                    
                    // 确保高度至少为100px
                    if (this.height < 100) {
                        this.height = 100;
                    }
                } catch (error) {
                    console.error('获取高度失败:', error);
                    // 设置一个默认高度
                    this.height = 500;
                }
            },
            
            async getWithdrawInfoFunc() {
                const res = await apiGetWithdrawInfo();
                this.withdrawInfo = res;
            },
            
            // 提现记录相关
            mescrollInit(mescroll) {
                console.log('提现记录mescroll初始化', mescroll);
                this.mescroll = mescroll;
            },
            
            upCallbackWithdraw(page) {
                console.log('提现记录上拉回调', page);
                const pageNum = page.num
                const pageSize = page.size
                
                apiWithdrawLog({
                    page_no: pageNum,
                    page_size: pageSize,
                }).then(({
                    lists,
                    count,
                }) => {
                    // 如果是第一页或是搜索时需手动置空列表
                    if (pageNum == 1||this.keyword) this.withdrawLists = []
                    // 重置列表数据
                    this.withdrawLists = [...this.withdrawLists, ...lists]
                    this.mescroll.endBySize(lists.length, count)
                }).catch((err) => {
                    this.mescroll.endErr()
                })
            },
            
            // 获取交易类型列表
            async getTransactionTypesFunc() {
                try {
                    const res = await getTransactionTypes();
                    console.log('获取交易类型成功:', res);
                    if (res && res.type) {
                        this.transactionTypes = res.type || {};
                    } else {
                        this.transactionTypes = res || {};
                    }
                } catch (error) {
                    console.error('获取交易类型失败:', error);
                    // 设置默认交易类型作为后备
                    this.transactionTypes = {
                        100: "结算入账", 
                        101: "商家提现中", 
                        102: "商家提现", 
                        103: "商家提现失败", 
                        104: "核销酒券入账", 
                        105: "线下积分消费入账",
                        106: "运营中心奖励收益"
                    };
                }
            },
            
            // 显示筛选弹出层
            showFilterPopup() {
                this.tempTypeFilter = this.typeFilter;
                this.tempDateFilter = this.dateFilter;
                this.isFilterVisible = true;
            },
            
            // 关闭筛选弹出层
            closeFilterPopup() {
                this.isFilterVisible = false;
            },
            
            // 重置筛选条件
            resetFilter() {
                this.tempTypeFilter = '';
                this.tempDateFilter = '';
            },
            
            // 应用筛选条件
            applyFilter() {
                this.typeFilter = this.tempTypeFilter;
                this.dateFilter = this.tempDateFilter;
                this.updateFilterText();
                this.loadIncomeData(true);
                this.closeFilterPopup();
            },
            
            // 更新筛选显示文本
            updateFilterText() {
                // 交易类型筛选文本
                if (this.typeFilter === '') {
                    this.typeFilterText = '全部类型';
                } else {
                    // 从动态获取的交易类型中查找对应的名称
                    this.typeFilterText = this.transactionTypes[this.typeFilter] || '未知类型';
                }
                
                // 日期筛选文本
                switch(this.dateFilter) {
                    case 'today':
                        this.dateFilterText = '今天';
                        break;
                    case 'week':
                        this.dateFilterText = '本周';
                        break;
                    case 'month':
                        this.dateFilterText = '本月';
                        break;
                    default:
                        this.dateFilterText = '全部时间';
                }
            },
            
            // 直接加载收入明细数据的方法
            loadIncomeData(reset = false) {
                if (reset) {
                    this.incomePage = 1;
                    this.incomeLists = [];
                    this.incomeMore = true;
                }
                
                if (!this.incomeMore || this.incomeLoading) return;
                
                this.incomeLoading = true;
                console.log('手动加载收入明细, 页码:', this.incomePage, '筛选条件:', {type: this.typeFilter, date: this.dateFilter});
                
                // 构建请求参数
                const params = {
                    page_no: this.incomePage,
                    page_size: 10,
                    source: 0
                };
                
                // 添加交易类型筛选 - 处理数字类型
                if (this.typeFilter !== '') {
                    params.source_type = this.typeFilter;
                }
                
                // 添加日期筛选
                if (this.dateFilter) {
                    // 根据不同的日期筛选添加不同的时间范围参数
                    const now = new Date();
                    let startTime = '';
                    
                    if (this.dateFilter === 'today') {
                        // 今天的开始时间
                        startTime = new Date(now.setHours(0, 0, 0, 0)).toISOString();
                    } else if (this.dateFilter === 'week') {
                        // 本周的开始时间 (周一)
                        const day = now.getDay() || 7; // 如果是周日，getDay()返回0，我们将其视为7
                        const diff = now.getDate() - day + 1;
                        startTime = new Date(now.setDate(diff)).toISOString();
                    } else if (this.dateFilter === 'month') {
                        // 本月的开始时间
                        startTime = new Date(now.getFullYear(), now.getMonth(), 1).toISOString();
                    }
                    
                    if (startTime) {
                        params.start_time = startTime;
                        params.end_time = new Date().toISOString();
                    }
                }
                
                getAccountLog(params).then((data) => {
                    console.log('收入明细数据返回:', data);
                    
                    const list = data.list || [];
                    this.incomeLists = [...this.incomeLists, ...list];
                    
                    // 更新分页信息
                    this.incomeMore = !!data.more;
                    if (this.incomeMore) this.incomePage++;
                    
                }).catch((err) => {
                    console.error('获取收入明细失败:', err);
                }).finally(() => {
                    this.incomeLoading = false;
                    this.isScrollToBottom = false;
                });
            },
            
            // 处理收入明细列表滚动事件
            handleIncomeScroll(e) {
                if (this.incomeLoading || !this.incomeMore) return;
                
                const scrollTop = e.detail.scrollTop;
                const scrollHeight = e.detail.scrollHeight;
                const clientHeight = e.detail.scrollHeight - e.detail.deltaY;
                
                if (scrollTop + clientHeight + 50 >= scrollHeight && !this.isScrollToBottom) {
                    console.log('触发加载更多', {scrollTop, scrollHeight, clientHeight});
                    this.isScrollToBottom = true;
                    this.loadIncomeData();
                }
            },
            
            // 确保 downCallback 方法存在
            downCallback() {
                console.log('下拉刷新，当前标签:', this.activeTab);
                
                if (this.activeTab === 'withdraw') {
                    this.mescroll && this.mescroll.resetUpScroll();
                } else if (this.activeTab === 'income') {
                    this.loadIncomeData(true);
                }
            }
        }
        
    }
</script>

<style lang="scss">
    .wallet {
        background-color: #f8f9fc;
        background-image: 
            linear-gradient(120deg, rgba($-color-primary, 0.02) 0%, transparent 70%),
            radial-gradient(circle at 90% 10%, rgba($-color-primary, 0.04) 0%, transparent 30%),
            radial-gradient(circle at 10% 90%, rgba(#6E45E2, 0.03) 0%, transparent 40%);
        min-height: 100vh;
        padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
        overflow-x: hidden;
        
        .header {
            margin: 20rpx 30rpx 0;
            padding: 50rpx 40rpx 60rpx;
            border-radius: 28rpx;
            background: linear-gradient(135deg, $-color-primary, lighten($-color-primary, 18%));
            box-shadow: 
                0 20rpx 40rpx rgba($-color-primary, 0.3),
                0 8rpx 16rpx rgba($-color-primary, 0.2),
                inset 0 2rpx 3rpx rgba(255, 255, 255, 0.3);
            position: relative;
            overflow: hidden;
            transform: translateZ(0);
            // 光泽效果
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 40%;
                background: linear-gradient(to bottom, 
                    rgba(255, 255, 255, 0.15) 0%, 
                    rgba(255, 255, 255, 0.05) 60%, 
                    rgba(255, 255, 255, 0) 100%);
            }
            
            // 装饰圆形
            &::after {
                content: '';
                position: absolute;
                bottom: -80rpx;
                right: 20%;
                width: 220rpx;
                height: 220rpx;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
                z-index: 0;
            }
            
            // 装饰形状
            .decoration {
                position: absolute;
                width: 240rpx;
                height: 240rpx;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.06);
                top: -120rpx;
                right: -60rpx;
                z-index: 0;
                box-shadow: inset 0 0 20rpx rgba(255, 255, 255, 0.1);
                animation: floatAnimation 20s infinite alternate ease-in-out;
                
                &::before {
                    content: '';
                    position: absolute;
                    width: 160rpx;
                    height: 160rpx;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.08);
                    bottom: -40rpx;
                    left: -180rpx;
                    animation: floatAnimation 15s infinite alternate-reverse ease-in-out;
                }
                
                &::after {
                    content: '';
                    position: absolute;
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.05);
                    bottom: -240rpx;
                    left: -40rpx;
                    animation: floatAnimation 18s infinite alternate-reverse ease-in-out;
                }
                
                @keyframes floatAnimation {
                    0% { transform: translateY(0) rotate(0deg); }
                    50% { transform: translateY(-15rpx) rotate(5deg); }
                    100% { transform: translateY(5rpx) rotate(-5deg); }
                }
            }
            
            &-label {
                opacity: 0.95;
                font-weight: 500;
                position: relative;
                z-index: 1;
                letter-spacing: 2rpx;
                font-size: 28rpx;
                text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
                
                &::before {
                    content: '';
                    display: inline-block;
                    width: 16rpx;
                    height: 16rpx;
                    background: #fff;
                    border-radius: 50%;
                    margin-right: 12rpx;
                    vertical-align: middle;
                    opacity: 0.7;
                    box-shadow: 0 0 10rpx rgba(255, 255, 255, 0.8);
                }
            }
            
            &-price {
                font-size: 80rpx;
                font-weight: bold;
                position: relative;
                z-index: 1;
                text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
                letter-spacing: 2rpx;
                margin-top: 20rpx;
                animation: pulseText 2s infinite alternate ease-in-out;
                background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                display: inline-block;
                transform: translateZ(0);
                
                @keyframes pulseText {
                    0% { transform: scale(1); }
                    100% { transform: scale(1.02); }
                }
                
                &:active {
                    animation-play-state: paused;
                    transform: scale(1.05);
                }
            }
            
            &-btn {
                padding: 20rpx 40rpx;
                background: rgba(255, 255, 255, 0.95);
                border-radius: 50rpx;
                color: $-color-primary;
                font-weight: 600;
                box-shadow: 
                    0 10rpx 20rpx rgba(0, 0, 0, 0.15),
                    0 3rpx 6rpx rgba(0, 0, 0, 0.1),
                    inset 0 -2rpx 5rpx rgba(0, 0, 0, 0.05);
                transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                position: relative;
                z-index: 1;
                border: 1rpx solid rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(10px);
                overflow: hidden;
                
                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 50%;
                    background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
                }
                
                &:active {
                    transform: translateY(4rpx) scale(0.97);
                    box-shadow: 
                        0 4rpx 8rpx rgba(0, 0, 0, 0.12),
                        0 1rpx 3rpx rgba(0, 0, 0, 0.1),
                        inset 0 -1rpx 3rpx rgba(0, 0, 0, 0.05);
                }
                
                .iconfont {
                    font-size: 36rpx;
                    margin-right: 12rpx;
                    position: relative;
                    top: 2rpx;
                    animation: swingIcon 3s infinite ease-in-out;
                    transform-origin: bottom center;
                    display: inline-block;
                    
                    @keyframes swingIcon {
                        0%, 100% { transform: rotate(0deg); }
                        20% { transform: rotate(-10deg); }
                        40% { transform: rotate(5deg); }
                        60% { transform: rotate(-5deg); }
                        80% { transform: rotate(2deg); }
                    }
                }
            }
        }
        
        .data-cards {
            margin: 20rpx 30rpx;
            perspective: 1000rpx; // 3D视角效果
            
            .data-card {
                flex: 1;
                background: #fff;
                padding: 40rpx 30rpx;
                border-radius: 24rpx;
                margin: 0 15rpx;
                box-shadow: 
                    0 8rpx 30rpx rgba(0, 0, 0, 0.07),
                    0 1rpx 3rpx rgba(0, 0, 0, 0.05);
                transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
                overflow: hidden;
                position: relative;
                border: 1rpx solid rgba(0, 0, 0, 0.04);
                transform: rotateX(2deg) translateZ(0);
                transform-style: preserve-3d;
                backface-visibility: hidden;
                
                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 8rpx;
                    background: linear-gradient(90deg, $-color-primary, lighten($-color-primary, 20%));
                    opacity: 0.9;
                }
                
                &:first-child {
                    margin-left: 0;
                    &::before {
                        background: linear-gradient(90deg, #FF9D33, #FFD447);
                    }
                }
                
                &:last-child {
                    margin-right: 0;
                    &::before {
                        background: linear-gradient(90deg, #4FACFE, #00F2FE);
                    }
                }
                
                &:active {
                    transform: rotateX(0deg) translateY(3rpx) scale(0.98);
                    box-shadow: 0 3rpx 10rpx rgba(0, 0, 0, 0.06);
                }
                
                .data-value {
                    font-size: 44rpx;
                    font-weight: bold;
                    color: #333;
                    margin-bottom: 16rpx;
                    position: relative;
                    display: inline-block;
                    
                    &::after {
                        content: '';
                        position: absolute;
                        bottom: -8rpx;
                        left: 0;
                        width: 40%;
                        height: 4rpx;
                        border-radius: 4rpx;
                        background: rgba($-color-primary, 0.15);
                    }
                }
                
                .data-label {
                    font-size: 26rpx;
                    color: #999;
                    letter-spacing: 1rpx;
                    display: flex;
                    align-items: center;
                    
                    &::before {
                        content: '';
                        display: inline-block;
                        width: 8rpx;
                        height: 8rpx;
                        border-radius: 50%;
                        background: $-color-primary;
                        opacity: 0.5;
                        margin-right: 10rpx;
                    }
                }
            }
        }
        
        .section {
            margin: 20rpx 30rpx 20rpx;
            background: #fff;
            border-radius: 24rpx;
            box-shadow: 
                0 10rpx 40rpx rgba(0, 0, 0, 0.06),
                0 2rpx 6rpx rgba(0, 0, 0, 0.04);
            overflow: hidden;
            position: relative;
            border: 1rpx solid rgba(0, 0, 0, 0.03);
            
            .tab-header {
                padding: 0 20rpx;
                border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
                display: flex;
                justify-content: space-around;
                
                .tab-item {
                    padding: 32rpx 20rpx;
                    font-size: 30rpx;
                    color: #666;
                    position: relative;
                    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
                    flex: 1;
                    text-align: center;
                    
                    &.active {
                        color: $-color-primary;
                        font-weight: 600;
                        
                        &::after {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 25%;
                            width: 50%;
                            height: 6rpx;
                            background: $-color-primary;
                            border-radius: 6rpx 6rpx 0 0;
                            transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
                        }
                    }
                    
                    &:not(.active)::after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        width: 0%;
                        height: 6rpx;
                        background: $-color-primary;
                        border-radius: 6rpx 6rpx 0 0;
                        transition: all 0.3s ease;
                        opacity: 0;
                    }
                    
                    &:not(.active):hover::after {
                        left: 40%;
                        width: 20%;
                        opacity: 0.3;
                    }
                }
            }
            
            .filter-button-bar {
                padding: 20rpx;
                border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                .filter-hint {
                    font-size: 26rpx;
                    color: #666;
                    padding: 10rpx 0;
                    display: flex;
                    align-items: center;
                    
                    &::before {
                        content: '';
                        display: inline-block;
                        width: 12rpx;
                        height: 12rpx;
                        border-radius: 50%;
                        background: $-color-primary;
                        margin-right: 12rpx;
                        opacity: 0.7;
                    }
                }
                
                .filter-button {
                    padding: 12rpx 28rpx;
                    background: #f5f7fa;
                    border-radius: 30rpx;
                    font-size: 26rpx;
                    color: #666;
                    display: flex;
                    align-items: center;
                    transition: all 0.3s;
                    border: 1rpx solid rgba(0, 0, 0, 0.03);
                    
                    &:active {
                        background: #eef0f5;
                        transform: scale(0.97);
                    }
                    
                    .filter-button-text {
                        margin-right: 12rpx;
                    }
                    
                    .iconfont {
                        font-size: 24rpx;
                        color: $-color-primary;
                    }
                }
            }
            
            .content {
                padding-bottom: 30rpx;
                
                .wallet-cell {
                    padding: 30rpx 20rpx;
                    margin-bottom: 20rpx;
                    border-bottom: 1rpx solid rgba(0, 0, 0, 0.03);
                    transition: all 0.3s;
                    position: relative;
                    
                    &::after {
                        content: '';
                        position: absolute;
                        left: 30rpx;
                        right: 30rpx;
                        bottom: 0;
                        height: 1rpx;
                        background: rgba(0, 0, 0, 0.03);
                    }
                    
                    &:active {
                        background: rgba($-color-primary, 0.02);
                    }
                    
                    &:last-child {
                        border-bottom: none;
                        
                        &::after {
                            display: none;
                        }
                    }
                    
                    .remark {
                        font-weight: 500;
                        color: #333;
                        margin-bottom: 8rpx;
                    }
                    
                    .time {
                        font-size: 24rpx;
                        color: #999;
                    }
                    
                    .money {
                        font-weight: 600;
                        font-size: 34rpx;
                        color: #333;
                        margin-bottom: 8rpx;
                        
                        &.income-color {
                            color: #3ECF8E;
                        }
                    }
                    
                    .lighter {
                        font-size: 24rpx;
                        color: #999;
                    }
                }
                
                .empty-box {
                    padding: 20rpx;
                    
                    .empty-icon {
                        width: 240rpx;
                        height: 240rpx;
                        margin-bottom: 30rpx;
                        opacity: 0.7;
                        animation: float 6s ease-in-out infinite;
                    }
                    
                    @keyframes float {
                        0% { transform: translateY(0); }
                        50% { transform: translateY(-15rpx); }
                        100% { transform: translateY(0); }
                    }
                    
                    .empty-text {
                        color: #999;
                        font-size: 28rpx;
                        letter-spacing: 2rpx;
                    }
                }
                
                .loading-box, .loading-more, .no-more {
                    padding: 20rpx;
                    color: #999;
                    font-size: 26rpx;
                    letter-spacing: 1rpx;
                    
                    .loading {
                        width: 36rpx;
                        height: 36rpx;
                        border: 3rpx solid rgba($-color-primary, 0.1);
                        border-top: 3rpx solid $-color-primary;
                        border-radius: 50%;
                        margin-right: 16rpx;
                        animation: spin 1s linear infinite;
                    }
                    
                    @keyframes spin {
                        0% { transform: rotate(0deg); }
                        100% { transform: rotate(360deg); }
                    }
                }
                
                .no-more {
                    position: relative;
                    
                    &:before, &:after {
                        content: '';
                        position: absolute;
                        top: 50%;
                        width: 60rpx;
                        height: 1rpx;
                        background: rgba(0, 0, 0, 0.1);
                    }
                    
                    &:before {
                        left: calc(50% - 150rpx);
                    }
                    
                    &:after {
                        right: calc(50% - 150rpx);
                    }
                }
            }
        }
        
        // 自定义弹出层
        .custom-popup-mask {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4rpx);
            z-index: 999;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            animation: fadeIn 0.3s ease;
            
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
        }
        
        .custom-popup {
            width: 100%;
            background: #fff;
            border-radius: 30rpx 30rpx 0 0;
            overflow: hidden;
            animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.1);
            
            @keyframes slideUp {
                from { transform: translateY(100%); }
                to { transform: translateY(0); }
            }
        }
        
        .filter-popup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30rpx;
            border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
            
            .filter-popup-title {
                font-size: 34rpx;
                font-weight: bold;
                color: #333;
                position: relative;
                padding-left: 20rpx;
                
                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 20%;
                    height: 60%;
                    width: 6rpx;
                    background: $-color-primary;
                    border-radius: 6rpx;
                }
            }
            
            .filter-popup-close {
                font-size: 38rpx;
                color: #999;
                width: 60rpx;
                height: 60rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                transition: all 0.2s;
                
                &:active {
                    background: #f5f5f5;
                    transform: rotate(90deg);
                }
            }
        }
        
        .filter-popup-content {
            flex: 1;
            overflow-y: auto;
            padding: 0 30rpx;
            
            .filter-section {
                padding: 20rpx 0;
                border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
                
                &:last-child {
                    border-bottom: none;
                }
                
                .filter-section-title {
                    font-size: 28rpx;
                    font-weight: bold;
                    margin-bottom: 24rpx;
                    color: #333;
                    display: flex;
                    align-items: center;
                    
                    &::after {
                        content: '';
                        flex: 1;
                        height: 1rpx;
                        background: rgba(0, 0, 0, 0.05);
                        margin-left: 20rpx;
                    }
                }
                
                .filter-options {
                    display: flex;
                    flex-wrap: wrap;
                    margin: 0 -10rpx;
                    
                    .filter-option {
                        width: calc(33.33% - 20rpx);
                        margin: 10rpx;
                        padding: 18rpx 0;
                        text-align: center;
                        background-color: #f8fafc;
                        color: #666;
                        font-size: 26rpx;
                        border-radius: 12rpx;
                        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                        position: relative;
                        overflow: hidden;
                        border: 1rpx solid rgba(0, 0, 0, 0.03);
                        
                        &:active {
                            transform: scale(0.96);
                        }
                        
                        &.active {
                            background-color: rgba($-color-primary, 0.08);
                            color: $-color-primary;
                            font-weight: 500;
                            border: 1rpx solid rgba($-color-primary, 0.2);
                            box-shadow: 0 2rpx 8rpx rgba($-color-primary, 0.1);
                            
                            &::before {
                                content: '';
                                position: absolute;
                                right: -10rpx;
                                bottom: -10rpx;
                                width: 30rpx;
                                height: 30rpx;
                                background: $-color-primary;
                                opacity: 0.2;
                                border-radius: 50%;
                            }
                        }
                    }
                }
            }
        }
        
        .filter-popup-footer {
            display: flex;
            border-top: 1rpx solid rgba(0, 0, 0, 0.05);
            
            .filter-popup-btn {
                flex: 1;
                padding: 34rpx 0;
                text-align: center;
                font-size: 30rpx;
                transition: all 0.3s;
                position: relative;
                overflow: hidden;
                z-index: 1;
                
                &:active::after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 1000rpx;
                    height: 1000rpx;
                    background: rgba(0, 0, 0, 0.05);
                    border-radius: 50%;
                    transform: translate(-50%, -50%) scale(0);
                    z-index: -1;
                    animation: ripple 0.6s ease-out;
                }
                
                @keyframes ripple {
                    to {
                        transform: translate(-50%, -50%) scale(1);
                        opacity: 0;
                    }
                }
                
                &.filter-popup-reset {
                    background-color: #f8f8f8;
                    color: #666;
                }
                
                &.filter-popup-apply {
                    background: linear-gradient(135deg, $-color-primary, lighten($-color-primary, 10%));
                    color: #fff;
                    font-weight: 500;
                    box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.08);
                }
            }
        }
    }
</style>
